<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>系统使用但未得到管理配参查看及装载</title>
        <script src="./lib/axios.js"></script>
        <script src="./lib/vue.js"></script>
        <link rel="stylesheet" href="./lib/elementindex.css">
        <script src="./lib/elementindex.js"></script>
    </head>
    <body>
        <div id='app'>
            <el-card style="font-size:small;margin-bottom: 1.125rem;">
                <el-link :href="'./home.html?profile='+profile" style="color: blue;">&lt;&lt;&lt;返回配参查看编辑页面</el-link>
            </el-card>
            <el-form>

                <el-form-item label="">
                    <el-row>
                        <el-col :span='4'>
                            <el-checkbox :key="-1" v-model="importAll" @change="handleCheckedAll" :indeterminate="importCount>0&&importCount<filteredList.length">全选
                            </el-checkbox>
                        </el-col>
                        <el-col :span='6'>
                            <el-input type="text" placeholder="输入关键字,定位配参项" v-model="filterInput" rows="1" @input="handleFilterInput">
                            </el-input>
                        </el-col>
                        <el-col :span='6'>
                            &nbsp;
                        </el-col>
                        <el-col :span='8'>
                            <el-button type="primary" @click='handleImport' :disabled="importCount==0">导入配参到{{profile}}配置数据源</el-button>
                        </el-col>
                    </el-row>

                </el-form-item>
                <el-table border :data="filteredList" style="width: 100%;margin-bottom: 20px;" row-key="id">
                    <el-table-column label="操作" prop="imported" width='60px'>
                        <template slot-scope="scope">
                            <el-checkbox :key="scope.row.item_code" :value="scope.row.action=='created'" @change="handleCheckedItem(scope.row,$event)">&nbsp;&nbsp;&nbsp;
                            </el-checkbox>
                        </template>
                    </el-table-column>

                    <el-table-column label="配参代码" prop="item_code">
                    </el-table-column>

                    <el-table-column label="推导名称" prop="item_name">
                    </el-table-column>

                    <el-table-column label="当前数值" prop="item_value" :show-overflow-tooltip="true">
                    </el-table-column>

                    <el-table-column label="推导格式" prop="item_schema" :show-overflow-tooltip="true">
                        <template slot="header">
                            <span>推导格式</span>
                            <span>
                                <el-tooltip content="Bottom center" placement="bottom" effect="light">
                                    <i class="el-icon-info"></i>
                                    <div slot="content">
                                        类型及格式将影响编辑配参时的校验，不会影响配参赋值和刷新。配参[设置]可调整参数类型及格式。
                                    </div>
                                </el-tooltip>
                            </span>
                        </template>
                        <template slot-scope="scope">
                            <span>{{scope.row.item_schema}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="被使用于" prop="usedBy" :show-overflow-tooltip="true">
                    </el-table-column>
                </el-table>
            </el-form>
        </div>

        <script type='module'>
            import * as $util from './lib/util.js'
                        
            let hosturl = document && document.location.href.startsWith('http://127.0.0.1:8848') ? 'http://localhost/resources' : '.';
            
            function importConfigItem(self)
            {
                let lst = vm.filteredList.filter(it=>it.action);
                lst.forEach(it=>{
                    it.item_profile = window.vm.profile;
                    it.item_schema.default = it.item_value;
                    });
                
                axios.post(hosturl +'/change-submit',{remark:'从系统中装载',array:lst,action:"published"}).then(
                resp =>{
                    // window.location.reload();
                    vm.$message({
                             type:resp.data.error?'error':'success',
                             message:resp.data.error?resp.data.data:'导入成功'
                         });
                         
                    loadData();

                }).catch(ex=>{
                    vm.$message({showClose:true,type:"error",message:ex});
                });
                
            };
            
            function loadData()
            {
                axios.get(hosturl +`/list-to-load?profile=${$util.getUrlArgOrDefault('profile','default')}`).then((newHis)=>{
                     let itemList = newHis.data.data;
                     itemList.forEach(it=>it.action = vm.importAll?'created':'');
                     // vm.configList.splice(0,vm.configList.length,...itemList);
                     vm.configList = itemList;
                     vm.handleFilterInput();
                     
                }).catch(ex=>{
                    vm.$message({showClose:true,type:"error",message:ex});
                }); 
            }
            
            window.vm = new Vue({
                el: '#app',
                data: {
                    configList:[],
                    filteredList:[],
                    importAll:true,
                    importCount:0,
                    filterInput:"",
                    profile:$util.getUrlArgOrDefault('profile','default'),
                },
                methods: {
                    handleFilterInput:function()
                    {
                        let val = this.filterInput;
                        if(!val) 
                        {
                            this.filteredList = this.configList;
                        }
                        else
                        {
                            this.filteredList = this.configList.filter(it=>
                                 it.item_code&&it.item_code.indexOf(val) >= 0
                                 || it.item_name&&it.item_name.indexOf(val) >= 0 
                                 || it.item_value&&it.item_value.indexOf(val) >= 0
                             );
                         }
                         
                        let checkedCount =0;
                        this.filteredList.forEach(it=>{
                            if(this.importAll) it.action='created';
                            checkedCount += it.action==='created'?1:0;
                            });
                        this.importCount = checkedCount;
                    },
                    handleImport:function(){
                       importConfigItem(this);
                    },
                    handleCheckedItem:function(it,$event)
                    {
                        it.action=$event?'created':'';
                        this.importCount += $event?1:-1;
                        if(this.importCount===0)this.importAll = false;
                        if(this.importCount===this.filteredList.length) this.importAll=true;
                    },
                    handleCheckedAll:function()
                    {
                        this.filteredList.forEach(it=>it.action=this.importAll?'created':'');
                        this.importCount = this.importAll?this.filteredList.length:0;
                    }
                },
            });
            
            loadData();
           
        </script>
    </body>
</html>
